<template>
  <!-- html代码 一个模板只能有一个根标签div-->
  <div>
    <!-- 头部开始 -->
    <div class="header">
      <div class="header_top">
        <!-- 居中容器 -->
        <div class="wrapper">
          <div class="left">山西农大新闻网欢迎您</div>
          <div class="right">学校主页</div>
        </div>
      </div>
      <div class="header_bottom">
        <!-- 居中容器 -->
        <div class="wrapper">
          <div class="logo">
            <img src="../assets/resource/img/logo.png" alt="" />
          </div>
          <div class="category">
            <ul>
              <!-- vue指令 v-for 列表渲染 
                item--》数组中每一个对象(栏目{id,name,no})
                渲染变量使用{{}}
                --->
              <li v-for="item in categories" :key="item.id">
                <i class="el-icon-edit"></i>&nbsp;&nbsp;{{ item.name }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- 头部结束 -->
    <!-- 体部开始 -->
    <div class="content">
      <!-- 轮播图 -->
      <el-carousel :interval="2000" type="card" height="300px">
        <el-carousel-item v-for="item in swipes" :key="item.id">
          <!-- 绑定变量 v-bind: 简写: -->
          <img width="100%" height="300px" v-bind:src="item.url" alt="" />
        </el-carousel-item>
      </el-carousel>
      <!-- 卡片 -->
      <div class="card_parent">
        <div class="wrapper">
          <!-- item--{category:{id,name,},article:[{title:""},{},{}]} -->
          <div class="card" v-for="item in columnArticles" :key="item.category.id">
            <div class="top">
              <div class="left">{{item.category.name}}</div>
              <div class="right">/More+</div>
            </div>
            <div class="bottom">
              <ul>
                <!-- it---循环遍历article:[{},{},{}] -->
                <li v-for='it in item.aritcle' :key="it.id">{{it.title}}</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 体部结束 -->
    <!-- 尾部开始 -->
    <div class="footer"></div>
    <!-- 尾部结束 -->
  </div>
</template>
<script>
//  引入get请求 @---表示src目录
import { get } from "@/utils/request";
// js代码
export default {
  // 存放vue变量
  data() {
    return {
      // 保存栏目
      categories: [],
      // 轮播图
      swipes: [],
      //栏目以及栏目所对应的文章
      columnArticles:[]
    };
  },
  // 存放函数和方法
  methods: {
    // 查询所有栏目
    async queryCategory() {
      let res = await get("/index/category/findAll");
      //res.data []
      // 将后端返回数据设置给数组
      this.categories = res.data;
    },
    // 获取所有轮播图图片
    async getSwipe() {
      let res = await get("/index/carousel/findAll");
      // console.log(res,'swipe');
      // 将数据设置给变量swipes
      this.swipes = res.data;
    },
    // 获取所有栏目以及栏目所对应的文章
    async getArticle(){
      let res = await get("/index/article/findCategoryArticles");
      console.log(res,'获取响应');
      this.columnArticles = res.data;
    }
  },
  // vue生命周期 表示vue实例创建完毕 此时可以获取data数据和methods种方法
  created() {
    // this--->指向vue实例
    this.queryCategory();
    this.getSwipe();
    this.getArticle();
  },
};
</script>
<!-- css代码 lang='scss' scoped局部生效 -->
<style lang="scss" scoped>
// 头部样式
.header {
  .header_top {
    background-color: #028b39;
    height: 45px;
    .wrapper {
      color: white;
      line-height: 45px;
      .left {
        float: left;
      }
      .right {
        float: right;
      }
    }
    // 给父元素清浮动
    .wrapper::after {
      display: block;
      clear: both;
      content: "";
    }
  }
  .header_bottom {
    .wrapper {
      height: 102px;
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      .logo,
      img {
        width: 212px;
        height: 60px;
      }
      .category {
        ul {
          margin-top: 10px;
          li:hover {
            background-color: #028b39;
            color: white;
          }
        }
        ul > li {
          float: left;
          margin-left: 15px;
          padding: 0.8em;
        }
        ul::after {
          display: block;
          clear: both;
          content: "";
        }
      }
    }
  }
}
// 体部样式
.content {
  // 轮播图样式
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }
  // 卡片样式
  .card_parent {
    background-color: #ecf6f2;
    .wrapper{
      display: flex;
      flex: 0 1 30%;
      flex-wrap: wrap;
      .card{
        margin:10px 10px 10px 0;
        .top{
          width: 369px;
          height: 55px;
          background-color: #fff;
          display: flex;
          justify-content: space-between;
          line-height:55px;
          color: #028b39;
          font-weight: bold;
          font-size: 18px;
          padding: 0 10px;
          box-sizing: border-box;
          .left{
            width: 147px;
            height: 55px;
            border-bottom: 4px solid #028b39;
          }
        }
        .bottom{
          width: 369px;
          background-color: #fff;
          height: 375px;
          margin-top: 10px;
          ul>li{
           padding-left:10px;
           box-sizing: border-box;
           margin-top:10px;
          }
        }
      }
    }
  }
}
</style>